import type { MenuProps } from "antd";
import React, { useState } from "react";
import { useNavigate, useLocation, Location } from "react-router-dom";
import {
  DesktopOutlined,
  PieChartOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { Menu } from "antd";

type MenuItem = Required<MenuProps>["items"][number];
const items: MenuItem[] = [
  {
    label: "栏目1",
    key: "/Page",
    icon: <PieChartOutlined />,
  },
  {
    label: "栏目2",
    key: "/Page2",
    icon: <DesktopOutlined />,
  },
  {
    label: "栏目3",
    key: "/Page3",
    icon: <UserOutlined />,
    children: [
      {
        label: "栏目3-1",
        key: "/Page3/Page3-1",
        icon: <DesktopOutlined />,
      },
      {
        label: "栏目3-2",
        key: "/Page3/Page3-2",
        icon: <DesktopOutlined />,
      },
      {
        label: "栏目3-3",
        key: "/Page3/Page3-3",
        icon: <DesktopOutlined />,
      },
    ],
  },
  {
    label: "栏目4",
    key: "/Page4",
    icon: <UserOutlined />,
    children: [
      {
        label: "栏目4-1",
        key: "/Page4/Page4-1",
        icon: <DesktopOutlined />,
      },
      {
        label: "栏目4-2",
        key: "/Page4/Page4-2",
        icon: <DesktopOutlined />,
      },
      {
        label: "栏目4-3",
        key: "/Page4/Page4-3",
        icon: <DesktopOutlined />,
      },
    ],
  },
  {
    label: "栏目5",
    key: "/Page5",
    icon: <UserOutlined />,
  },
];

const MenuComp: React.FC = () => {
  const useRouter = useLocation();
  const navgetTo = useNavigate();
  
  console.log(useRouter, "useRouter");

  let openKeysStime: string = "";

  for (let index = 0; index < items.length; index++) {
    if (items[index]?.children != null) {
      
       items[index]?.children.find((itemSChil: { key: string }) => {
        if (itemSChil.key == useRouter.pathname) {
          openKeysStime = items[index].key;
        }
      });

    } 
    
  }


 
  const [openKeys, setOpenKeys] = useState([openKeysStime]);
  console.log(openKeys,'openKeys')

  const meuClick = (e: { key: string }) => {
    console.log("meuClick", e.key);

    // 编程式导航
    navgetTo(e.key);
  };
  const handleOpenChange = (keys: string[]) => {
    setOpenKeys([keys[keys.length - 1]]);
  };
  return (
    <div>
      <Menu
        theme="dark"
        defaultSelectedKeys={[useRouter.pathname]}
        mode="inline"
        items={items}
        openKeys={openKeys} // 当前展开项 的数据
        onClick={meuClick}
        onOpenChange={handleOpenChange} // 某个 菜单站展开或者折叠的时候点击事件
      />
    </div>
  );
};

export default MenuComp;
